<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li {
				list-style: none;
				line-height: 22px;
				cursor: pointer;
			}
			.current {
				background: #6cf;
				font-weight: bold;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<ul>
			<li id="current">jQuery简介</li>
			<li id="z">jQuery语法</li>
			<li id="x">jQuery选择器</li>
			<li id="c">jQuery事件与动画</li>
			<li id="v">jQuery方法</li>
		</ul>
		<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
		<script type="text/javascript">
			var i=1;
			$(document).ready(function() {
				$("ul li:first-child").click(function() {
					$("ul li:first-child").addClass("current");
				});
				$("ul li:nth-child(2)").click(function() {
					$("ul li:nth-child(2)").addClass("current");
				});
				$("ul li:nth-child(3)").click(function() {
					$("ul li:nth-child(3)").addClass("current");
				});
				$("ul li:nth-child(4)").click(function() {
					$("ul li:nth-child(4)").addClass("current");
				});
				$("ul li:nth-child(5)").click(function() {
					$("ul li:nth-child(5)").addClass("current");
				});
			});
		</script>
	</body>

</html>